<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/nav.css">
    <script src="../js/jquery-1.10.1.min.js"></script>
    <script src="../js/nav.js"></script>
    <!-- <script src="../js/nav1.js"></script> -->
    <title>Document</title>
</head>

<body>
    <div class="navBar"></div>
</body>
<script>
    // 此处通过ajax请求通服务器下的文件  实现了html结构的复用  但是由于ajax是异步的  js无法获取元素绑定事件

    // 解决办法
    // 1.等动态生成之后 再获取元素绑定事件  => 等html生成之后  再动态创建script表情载入js
    $.ajax({
        type: "get",
        url: "./header.html",
        dataType: "text",
        success(html) {
            $(".navBar").html(html);
            var script = document.createElement("script");
            script.src = "../js/nav.js";
            document.head.appendChild(script);
        }
    })
    // 2.利用事件委托给未来生成的元素绑定事件
    // 利用ajax方法
    $.ajax({
        type: "get",
        url: "./header.html",
        dataType: "text",
        success(html) {
            $(".navBar").html(html);
            // var script = document.createElement("script");
            // script.src = "../js/nav.js";
            // document.head.appendChild(script);
        }
    })
    // 利用jQuery方法   因为nav1.js使用事件委托绑定事件 所以此处需要载入html结构就可以了
    $(".navBar").load("../html/header.html", function () {
        console.log("载入成功");
    })


    // jQuery中的用法
    // $(ele).load(url,callback) 载入远程HTML文件代码并插入至DOM中
    // $.getScript(url, callback) 属于函数$的静态方法 通过HTTP GET 请求载入并执行一个JavaScript文件
    $(".navBar").load("../html/header.html", function () {
        console.log("载入成功");

        $.getScript("../js/nav.js", function () {
            console.log("Js载入完毕");
        })
    })

</script>

</html>